<template>
    <div class="app-container">
        <!-- 搜索 -->
        <el-row type="flex" justify="end" style="margin-bottom: 20px">
            <!-- 根据姓名搜索 -->
            <el-col :span="3" style="margin-right: 10px;">
                <el-select v-model="params.id" placeholder="请选择区域">
                    <el-option
                        v-for="item in list"
                        :key="item.id"
                        :label="item.living"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-col>
            <!-- 搜索重置按钮 -->
            <el-button type="primary" @click="getLiving" icon="el-icon-search"></el-button>
            <el-button type="primary" @click="reset">重置</el-button>
            <el-button type="primary" @click="addDialog = true;">添加</el-button>
        </el-row>
        <!-- 表格展示 -->
        <el-table :data="tableData" v-loading="loading" stripe border>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="living" label="生活区"></el-table-column>
            <el-table-column prop="address" label="详细地址"></el-table-column>
            <el-table-column prop="numBuilding" label="楼栋总数"></el-table-column>
            <el-table-column prop="numRoom" label="寝室总数"></el-table-column>
            <!-- 操作按钮 -->
            <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                    <el-button
                        size="mini"
                        type="warning"
                        @click="addBuild(scope.$index, scope.row)"
                    >添加楼栋</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加弹窗框 -->
        <el-dialog :visible.sync="addDialog" title="添加生活区">
            <el-form :model="addForm" :rules="rules" ref="addForm">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="生活区" :label-width="formLabelWidth" prop="living">
                            <el-input v-model="addForm.living" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="详细地址" :label-width="formLabelWidth">
                            <el-input v-model="addForm.address" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 提交重置按钮 -->
                <el-row>
                    <el-col style="display: flex; justify-content: center;">
                        <el-form-item>
                            <el-button type="primary" @click="addSubmitForm()">提交</el-button>
                            <el-button @click="resetForm()">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog :visible.sync="editDialog" title="编辑生活区">
            <el-form :model="editForm" :rules="rules" ref="editForm">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="生活区" :label-width="formLabelWidth" prop="living">
                            <el-input v-model="editForm.living" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="详细地址" :label-width="formLabelWidth">
                            <el-input v-model="editForm.address" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 提交重置按钮 -->
                <el-row>
                    <el-col style="display: flex; justify-content: center;">
                        <el-form-item>
                            <el-button type="primary" @click="editSubmitForm()">提交</el-button>
                            <el-button @click="resetForm()">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
        <!-- 添加楼栋弹出框 -->
        <el-dialog :visible.sync="addBuildDialog" title="添加楼栋"><p style="margin-top: -20px;">当前生活区：{{editForm.living}}</p>
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="addBuildTextarea"></el-input>
            <p>添加楼栋的格式：一栋,二栋,三栋，名称不一定是例子这样，可以自定义，如：龙湾楼，瓯江楼~~~,注意：逗号是 <span style="font-weight: 900;">英文逗号</span> </p>
            <!-- 提交重置按钮 -->
            <el-row>
                <el-col style="display: flex; justify-content: center;margin-top: 40px;">
                    <el-button type="primary" @click="addBuildSub">提交</el-button>
                    <el-button @click="resetForm()">重置</el-button>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>
<script>
import { getLiving, deleteLiving, addLiving, updateLiving, addbuild } from "@/api/living"
export default {
    data() {
        return {
            tableData: [],
            // 生活区下拉框数据
            list: [],
            formLabelWidth: '80px',
            // 弹出框默认值
            addDialog: false,
            editDialog: false,
            addBuildDialog: false,
            loading: false,
            // 请求参数
            params: {
                id: "",
                pageCurrent: 1,
                pageSize: 100
            },
            // 添加生活区表单数据
            addForm: {
                living: "",
                address: ""
            },
            // 编辑生活区表单数据
            editForm: {
                id: "",
                living: "",
                address: "",
                numBuilding: "",
                numRoom: ""
            },
            // 添加楼栋
            addBuildTextarea: "",
            // 表单校验
            rules: {
                living: [
                    { required: true, message: '请输入生活区', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getList()
        this.getLiving()
    },
    methods: {
        // 获取生活区下拉框数据
        async getList() {
            await getLiving(this.params).then((res) => {
                if (res.code === "200") {
                    this.list = res.data.records
                }
            })
        },
        // 获取数据
        async getLiving() {
            await getLiving(this.params).then((res) => {
                if (res.code === "200") {
                    this.loading = true;
                    setTimeout(() => {
                        console.log('生活区管理');
                        this.tableData = res.data.records
                        console.log(res.data.records);
                        this.loading = false;
                    }, 200);
                }
            })
        },
        // 删除数据
        async handleDelete(index, row) {
            const confirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch((err) => err)
            if (confirm !== 'confirm') {
                return this.$message.info("已取消删除")
            }
            // 确定删除
            deleteLiving(row.id).then((res) => {
                if (res.code !== "200") {
                    this.$message.error("删除失败")
                } else {
                    this.$message.success("删除成功")
                    this.getLiving();
                    this.getList()
                }
            })
        },
        // 添加生活区
        addSubmitForm() {
            this.$refs.addForm.validate(async valid => {
                if (valid) {
                    await addLiving(this.addForm)
                        .then((res) => {
                            if (res.code === "200") {
                                this.addDialog = false
                                this.getLiving()
                                this.getList()
                                this.$message.success(res.msg)
                                this.addForm = {}
                            } else {
                                this.$message.error(res.msg)
                                return false;
                            }
                        })
                        .catch((err) => { this.$message.error(res.msg) })
                } else {
                    this.$message.error("请认真填写")
                    return false;
                }
            })
        },
        // 展示编辑弹出框
        handleEdit(index, row) {
            this.editDialog = true,
                this.editForm = JSON.parse(JSON.stringify(row))
        },
        // 编辑框提交
        editSubmitForm() {
            // console.log(row.id);
            this.$refs.editForm.validate(async valid => {
                if (valid) {
                    await updateLiving(this.editForm)
                        .then((res) => {
                            if (res.code === "200") {
                                this.editDialog = false
                                this.getLiving()
                                this.getList()
                                this.$message.success(res.msg)
                                this.editForm = {}
                            } else {
                                this.$message.error(res.msg)
                                return false;
                            }
                        })
                        .catch((err) => { this.$message.error(res.msg) })
                } else {
                    this.$message.error("请认真填写")
                    return false;
                }
            })
        },
        // 确认添加楼栋
        addBuild(index, row) {
            this.addBuildDialog = true
            this.editForm = JSON.parse(JSON.stringify(row))
        },
        addBuildSub() {
            console.log(this.editForm.id);
            addbuild({ building:this.addBuildTextarea,livingId:this.editForm.id }).then((res)=>{
                this.getLiving()
                this.addBuildDialog = false
            })
        },



        // 重置添加,编辑对话框,数据,验证都清空
        resetForm() {
            this.addForm = {}
            this.editForm = {}
            this.addBuildTextarea = ""
        },
        // 搜索重置按钮
        async reset() {
            this.params.id = "";
            await getLiving(this.params).then((res) => {
                this.loading = true;
                setTimeout(() => {
                    this.tableData = res.data.records;
                    this.loading = false;
                }, 500);
            });
        },

    },
}
</script>
<style lang="">
    
</style>